<template lang="pug">
.px-6.py-2.text-sm.text-prim(v-show="baojiaInfo.baojiaName") 添加单品至 {{baojiaInfo.baojiaName}}
.flex
  view
    .list-btn(v-for="(item,i) in list" :key='item.id' @click="listClick(i)"
    :class="{'selected':(selected==item.id)}") 
      .content {{item.name}}
  .list-row
    .w-full.grid.grid-cols-2.gap-2
      .goods-card(v-for="item in goods" :key="'sub'+item.id" @click="toDetail(item)")
        view(class="h-[20vw] w-[20vw]")
          image.w-full.h-full(src="@/static/pic.png" mode="aspectFit")
        .title {{item.name}}
</template>
<script setup>
import { getProductType } from "@/api/common";
 
const selected = ref('')
const list = ref([])
const goods = ref([]);
const baojiaInfo = ref({})
onLoad(op=>{
  getProducts();
  baojiaInfo.value = op;
})
async function getProducts(){
  uni.showLoading();
  const res = await getProductType();
  list.value = res.rows;
  uni.hideLoading();
  selected.value = list.value[0].id
  goods.value = list.value[0].sub;
}
function  listClick(i) {
  selected.value = list.value[i].id;
  goods.value = list.value[i].sub;
}
function toDetail(item){
  let qs = `name=${item.name}`;
  if(baojiaInfo.value.baojiaName){
    qs+=`&baojiaName=${baojiaInfo.value.baojiaName}`
  }
  uni.navigateTo({
    url:`/pages/forms/index?${qs}`
  })
}
</script>
<style scoped lang="scss">
 page{
  @apply bg-[#F8F9F3];
}
.list-btn{
  @apply w-[25vw] py-4 text-xs text-gray-700 border-transparent;
    .content{
      @apply py-0 text-center  w-full;
      border-left: 4px solid transparent;

    }

  &.selected{
    .content {
      @apply border-prim text-prim font-semibold;
      border-left: 4px solid;
    }
  }
}
.goods-card{
  @apply rounded-md bg-white flex flex-col items-center justify-between p-3 shadow-sm ;
  .title{
    @apply px-4 text-sm text-prim
  }
}
.list-row{
  @apply  flex-1 pt-4 pr-4  overflow-y-auto h-[100vh];
}
</style>